<template>
	<view>
		<!--
			# 如何全局引用此插件
			import mlayer from '@/components/mlayer/mlayer'
			Vue.component('mlayer', mlayer);
			# 如何在页面中调用
			<mlayer ref="mlayer"></mlayer>
			this.$refs.mlayer.alert({})
		-->
		<!--alert start-->
		<block v-if="mlayer_cfg.alert.show">
			<view class="lcms-mlayer" :class="mlayer_cfg.alert.class">
				<view class="lcms-mlayer-bg" v-on:click="mlayer_do('alert')"></view>
				<view class="lcms-mlayer-alert lcms-mlayer-radius lcms-mlayer-anim-up">
					<view class="lcms-mlayer-alert-title" v-show="mlayer_cfg.alert.title">{{mlayer_cfg.alert.title}}</view>
					<view class="lcms-mlayer-alert-content" :class="mlayer_cfg.alert.title ? '' : 'lcms-mlayer-alert-notitle'">{{mlayer_cfg.alert.content}}</view>
					<view class="lcms-mlayer-alert-btn">
						<block v-if="mlayer_cfg.alert.btnarr">
							<view class="lcms-mlayer-alert-btn-bg lcms-mlayer-alert-btn-no" v-on:click="mlayer_do('alert', 'no')">{{mlayer_cfg.alert.btn[0]}}</view>
							<view class="lcms-mlayer-alert-btn-bg lcms-mlayer-alert-btn-yes" v-on:click="mlayer_do('alert', 'yes')" :style="mlayer_cfg.alert.color">{{mlayer_cfg.alert.btn[1]}}</view>
						</block>
						<block v-else-if="!mlayer_cfg.alert.btnarr">
							<view class="lcms-mlayer-alert-btn-bg lcms-mlayer-alert-btn-yes" v-on:click="mlayer_do('alert', 'yes')" :style="mlayer_cfg.alert.color">{{mlayer_cfg.alert.btn ? mlayer_cfg.alert.btn : '好的'}}</view>
						</block>
					</view>
				</view>
			</view>
		</block>
		<!--alert end-->
		<!--msg start-->
		<block v-else-if="mlayer_cfg.msg.show">
			<view class="lcms-mlayer" :class="mlayer_cfg.msg.class">
				<view class="lcms-mlayer-msg">
					<view class="lcms-mlayer-msg-content lcms-mlayer-radius lcms-mlayer-anim-up">{{mlayer_cfg.msg.content}}</view>
				</view>
			</view>
		</block>
		<!--msg end-->
		<!--loading start-->
		<block v-else-if="mlayer_cfg.loading.show">
			<view class="lcms-mlayer" :class="mlayer_cfg.loading.class">
				<view class="lcms-mlayer-bg"></view>
				<view class="lcms-mlayer-loading lcms-mlayer-anim-scale">
					<view class="lcms-mlayer-anim-loading"></view>
					<view class="lcms-mlayer-loading-content">{{mlayer_cfg.loading.title ? mlayer_cfg.loading.title : '加载中'}}</view>
				</view>
			</view>
		</block>
		<!--loading end-->
		<!--success start-->
		<block v-else-if="mlayer_cfg.success.show">
			<view class="lcms-mlayer" :class="mlayer_cfg.success.class">
				<view class="lcms-mlayer-loading lcms-mlayer-anim-scale">
					<view class="lcms-mlayer-icon lcms-mlayer-icon-success lcms-mlayer-anim-scale"></view>
					<view class="lcms-mlayer-loading-content">{{mlayer_cfg.success.title ? mlayer_cfg.success.title : 'success'}}</view>
				</view>
			</view>
		</block>
		<!--success end-->
		<!--error start-->
		<block v-else-if="mlayer_cfg.error.show">
			<view class="lcms-mlayer" :class="mlayer_cfg.error.class">
				<view class="lcms-mlayer-loading lcms-mlayer-anim-scale">
					<view class="lcms-mlayer-icon lcms-mlayer-icon-error lcms-mlayer-anim-scale"></view>
					<view class="lcms-mlayer-loading-content">{{mlayer_cfg.error.title ? mlayer_cfg.error.title : 'error'}}</view>
				</view>
			</view>
		</block>
		<!--error end-->
		<!--login start-->
		<block v-else-if="mlayer_cfg.login.show">
			<view class="lcms-mlayer" :class="mlayer_cfg.login.class">
				<view class="lcms-mlayer-bg" v-on:click="mlayer_do('login')"></view>
				<view class="lcms-mlayer-login lcms-mlayer-anim-scale lcms-mlayer-radius">
					<view class="lcms-mlayer-login-title">{{mlayer_cfg.login.title ? mlayer_cfg.login.title : '您还未登录'}}</view>
					<view class="lcms-mlayer-login-content">{{mlayer_cfg.login.content ? mlayer_cfg.login.content : '请登陆后再进行操作'}}</view>
					<view class="lcms-mlayer-login-icon">
						<view class="lcms-mlayer-login-icon-eyes"></view>
						<view class="lcms-mlayer-login-icon-mouth"></view>
					</view>
					<view class="lcms-mlayer-alert-btn">
						<block v-if="mlayer_cfg.login.btnarr">
							<view class="lcms-mlayer-alert-btn-bg lcms-mlayer-alert-btn-no" v-on:click="mlayer_do('login', 'no')">{{mlayer_cfg.login.btn[0]}}</view>
							<view class="lcms-mlayer-alert-btn-bg lcms-mlayer-alert-btn-yes" v-on:click="mlayer_do('login', 'yes')" :style="mlayer_cfg.login.color">{{mlayer_cfg.login.btn[1]}}</view>
						</block>
						<block v-else-if="!mlayer_cfg.login.btnarr">
							<view class="lcms-mlayer-alert-btn-bg lcms-mlayer-alert-btn-yes" v-on:click="mlayer_do('login', 'yes')" :style="mlayer_cfg.login.color">{{mlayer_cfg.login.btn ? mlayer_cfg.login.btn : '立即登陆'}}</view>
						</block>
					</view>
				</view>
			</view>
		</block>
		<!--login end-->
	</view>
</template>

<script>
	export default {
		name: 'mlayer',
		data() {
			return {
				mlayer_def: {
					show: false,
					title: '',
					class: '',
					color: '#2196F3',
					btn: '',
					shadeClose: false,
					timer: {}
				},
				mlayer_cfg: {
					alert: {},
					msg: {},
					frame: {},
					loading: {},
					success: {},
					error: {},
					login: {}
				}
			}
		},
		methods: {
			mlayer_extend(options) {
				var opt = JSON.parse(JSON.stringify(this.mlayer_def));
				for (var _slt in options) opt[_slt] = options[_slt];
				return opt;
			},
			mlayer_view(type, options) {
				clearTimeout(this.mlayer_def.timer);
				this.mlayer_close('alert', true);
				this.mlayer_close('msg', true);
				this.mlayer_close('loading', true);
				this.mlayer_close('success', true);
				this.mlayer_close('error', true);
				this.mlayer_close('login', true);
				options.show = true;
				options.btnarr = typeof options.btn == 'object' ? true : false;
				this.mlayer_cfg[type] = this.mlayer_extend(options);
				this.mlayer_cfg[type].color = 'color:' + this.mlayer_cfg[type].color;
				var cfg = this.mlayer_cfg[type];
				cfg.success && cfg.success(type), this.mlayer_action(type);
			},
			mlayer_action(type) {
				var that = this,
					cfg = that.mlayer_cfg[type];
				cfg.time && (that.mlayer_def.timer = setTimeout(function() {
					that.mlayer_close(type);
				}, 1000 * cfg.time));
			},
			mlayer_do(type, dowhat) {
				var that = this,
					cfg = this.mlayer_cfg[type];
				if (dowhat == 'no') {
					cfg.no && cfg.no(), that.mlayer_close(type);
				} else if (dowhat == 'yes') {
					cfg.yes ? cfg.yes(type) : that.mlayer_close(type);
				} else if (cfg.shadeClose == true) {
					that.mlayer_close(type);
				};
			},
			mlayer_close(type, noend) {
				var that = this,
					cfg = that.mlayer_cfg[type];
				if (type != '') {
					cfg.show = false;
					if (noend == true) {
						cfg.end && cfg.end(type);
					};
				};
			},
			alert(options) {
				this.mlayer_view('alert', options || {});
				return 'alert';
			},
			msg(options) {
				options.time = options.time ? options.time : 2;
				this.mlayer_view('msg', options || {});
				return 'msg';
			},
			loading(options) {
				this.mlayer_view('loading', options || {});
				return 'loading';
			},
			success(options) {
				this.mlayer_view('success', options || {});
				return 'success';
			},
			error(options) {
				this.mlayer_view('error', options || {});
				return 'error';
			},
			login(options) {
				this.mlayer_view('login', options || {});
				return 'login';
			},
			close(type) {
				if (type != '') {
					this.mlayer_close(type);
				} else {
					this.mlayer_close('alert');
					this.mlayer_close('msg');
					this.mlayer_close('loading');
					this.mlayer_close('success');
					this.mlayer_close('error');
					this.mlayer_close('login');
				};
			}
		}
	}
</script>

<style>
	.lcms-mlayer {
		margin: 0upx;
		padding: 0upx;
		position: relative;
		z-index: 20000000;
	}

	.lcms-mlayer * {
		margin: 0upx;
		padding: 0upx;
		font-family: "PingFang SC", "Arial", "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", FontAwesome, sans-serif;
		-webkit-overflow-scrolling: touch;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
		-webkit-animation-duration: .2s;
		animation-duration: .2s
	}

	@keyframes lcms-mlayer-anim-scale {
		0% {
			opacity: 0;
			-webkit-transform: scale(.5);
			transform: scale(.5)
		}

		100% {
			opacity: 1;
			-webkit-transform: scale(1);
			transform: scale(1)
		}
	}

	.lcms-mlayer-anim-scale {
		animation-name: lcms-mlayer-anim-scale;
		-webkit-animation-name: lcms-mlayer-anim-scale;
		animation-duration: .2s;
	}

	@keyframes lcms-mlayer-anim-up {
		0% {
			opacity: 0;
			-webkit-transform: translateY(1600upx);
			transform: translateY(1600upx)
		}

		100% {
			opacity: 1;
			-webkit-transform: translateY(0);
			transform: translateY(0)
		}
	}

	.lcms-mlayer-anim-up {
		-webkit-animation-name: lcms-mlayer-anim-up;
		animation-name: lcms-mlayer-anim-up;
		animation-duration: .2s;
	}

	.lcms-mlayer-radius {
		border-radius: 40upx;
	}

	.lcms-mlayer-bg {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.lcms-mlayer-alert {
		position: fixed;
		width: 90%;
		margin: 0 5%;
		bottom: 40upx;
		background-color: #ffffff;
	}

	.lcms-mlayer-alert-title {
		color: #000000;
		padding: 30upx 40upx 0 40upx;
		font-size: 40upx;
		font-weight: 600;
	}

	.lcms-mlayer-alert-content {
		color: #000000;
		padding: 20upx 40upx 0 40upx;
		font-size: 32upx;
		font-weight: 400;
	}

	.lcms-mlayer-alert-notitle {
		padding: 50upx 40upx 0 40upx;
		text-align: center;
	}

	.lcms-mlayer-alert-btn {
		font-size: 32upx;
		text-align: center;
		padding: 40upx 0upx;
		font-weight: 400;
		display: flex;
		justify-content: space-around;
	}

	.lcms-mlayer-alert-btn-no {
		color: #adadad;
		width: 100%;
		border-right: 2upx #e4e4e4 solid;
	}

	.lcms-mlayer-alert-btn-yes {
		color: #2196F3;
		width: 100%;
	}

	.lcms-mlayer-msg {
		position: fixed;
		width: 100%;
		bottom: 200upx;
		text-align: center;
	}

	.lcms-mlayer-msg-content {
		display: inline-block;
		padding: 10upx 40upx;
		min-width: 40%;
		max-width: 90%;
		font-size: 32upx;
		background-color: rgba(0, 0, 0, 0.8);
		color: #ffffff;
	}

	.lcms-mlayer-frame {
		position: fixed;
		width: 100%;
		height: 80%;
		padding-top: 102upx;
		bottom: 0;
		background-color: #f4f4f4;
		border-radius: 40upx 40upx 0 0;
	}

	.lcms-mlayer-frame-title {
		position: absolute;
		color: #000000;
		top: 0upx;
		padding: 0 5%;
		font-size: 36upx;
		font-weight: 600;
		width: 90%;
		height: 100upx;
		line-height: 100upx;
		border-bottom: 2upx #e4e4e4 solid;
		background-color: #ffffff;
		border-radius: 40upx 40upx 0 0;
	}

	.lcms-mlayer-frame-close {
		position: absolute;
		right: 0upx;
		top: 0upx;
		color: #2196F3;
		padding: 0 5%;
		font-size: 36upx;
		font-weight: 400;
		height: 100upx;
		line-height: 100upx;
	}

	.lcms-mlayer-frame-content {
		position: relative;
		width: 100%;
		color: #000000;
		height: 100%;
		overflow-x: hidden;
		overflow-y: auto;
	}

	.lcms-mlayer-frame-content-iframe {
		width: 100%;
		height: 100%;
	}

	.lcms-mlayer-loading {
		position: fixed;
		width: 240upx;
		height: 240upx;
		background-color: #ffffff;
		margin: -120upx 0 0 -120upx;
		top: 50%;
		left: 50%;
		border-radius: 20upx;
		text-align: center;
		box-shadow: 0 0 10upx 0upx rgba(0, 0, 0, 0.1);
	}

	.lcms-mlayer-loading-content {
		color: #000000;
		padding-top: 30upx;
		font-size: 32upx;
	}

	.lcms-mlayer-anim-loading {
		position: relative;
		margin: 40upx auto 0 auto;
		width: 100upx;
		height: 100upx;
		transform: rotate(165deg);
	}

	.lcms-mlayer-anim-loading:before,
	.lcms-mlayer-anim-loading:after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		display: block;
		width: 20upx;
		height: 20upx;
		border-radius: 0.25em;
		transform: translate(-50%, -50%);
	}

	.lcms-mlayer-anim-loading:before {
		animation: before 2s infinite;
	}

	.lcms-mlayer-anim-loading:after {
		animation: after 2s infinite;
	}

	@keyframes before {
		0% {
			width: 10upx;
			box-shadow: 40upx -10upx rgba(225, 20, 98, 0.75), -40upx 10upx rgba(111, 202, 220, 0.75);
		}

		35% {
			width: 60upx;
			box-shadow: 0 -10upx rgba(225, 20, 98, 0.75), 0 10upx rgba(111, 202, 220, 0.75);
		}

		70% {
			width: 10upx;
			box-shadow: -40upx -10upx rgba(225, 20, 98, 0.75), 40upx 10upx rgba(111, 202, 220, 0.75);
		}

		100% {
			box-shadow: 40upx -10upx rgba(225, 20, 98, 0.75), -40upx 10upx rgba(111, 202, 220, 0.75);
		}
	}

	@keyframes after {
		0% {
			height: 10upx;
			box-shadow: 10upx 40upx rgba(61, 184, 143, 0.75), -10upx -40upx rgba(233, 169, 32, 0.75);
		}

		35% {
			height: 60upx;
			box-shadow: 10upx 0 rgba(61, 184, 143, 0.75), -10upx 0 rgba(233, 169, 32, 0.75);
		}

		70% {
			height: 10upx;
			box-shadow: 10upx -40upx rgba(61, 184, 143, 0.75), -10upx 40upx rgba(233, 169, 32, 0.75);
		}

		100% {
			box-shadow: 10upx 40upx rgba(61, 184, 143, 0.75), -10upx -40upx rgba(233, 169, 32, 0.75);
		}
	}

	.lcms-mlayer-icon {
		position: relative;
		margin: 50upx auto 0 auto;
		height: 80upx;
		width: 80upx;
		display: block;
	}

	.lcms-mlayer-icon-success {
		border-radius: 100upx;
		-webkit-border-radius: 100upx;
		-moz-border-radius: 100upx;
		background: #8bc34a;
	}

	.lcms-mlayer-icon-success:after,
	.lcms-mlayer-icon-success:before {
		content: "";
		height: 56upx;
		width: 12upx;
		display: block;
		background: #fff;
		position: absolute;
		top: 12upx;
		left: 40upx;
		border-radius: 20upx;
		-webkit-border-radius: 20upx;
		-moz-border-radius: 20upx;
		transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
	}

	.lcms-mlayer-icon-success:before {
		height: 24upx;
		transform: rotate(-45deg);
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		top: 36upx;
		left: 16upx;
	}

	.lcms-mlayer-icon-error {
		border-radius: 100upx;
		-webkit-border-radius: 100upx;
		-moz-border-radius: 100upx;
		background: #F44336;
	}

	.lcms-mlayer-icon-error:before,
	.lcms-mlayer-icon-error:after {
		content: "";
		height: 12upx;
		width: 56upx;
		display: block;
		background: #fff;
		border-radius: 20upx;
		-webkit-border-radius: 20upx;
		-moz-border-radius: 20upx;
		position: absolute;
		top: 34upx;
		left: 12upx;
		transform: rotate(-45deg);
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
	}

	.lcms-mlayer-icon-error:after {
		transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
	}

	.lcms-mlayer-login {
		position: fixed;
		width: 600upx;
		height: auto;
		top: 50%;
		left: 50%;
		margin: -300upx 0 0 -300upx;
		background: #ffffff;
	}

	.lcms-mlayer-login-title {
		font-size: 40upx;
		text-align: center;
		padding: 60upx 0 0 0;
	}

	.lcms-mlayer-login-content {
		font-size: 32upx;
		text-align: center;
		padding: 20upx 0 0 0;
		color: #808080;
	}

	.lcms-mlayer-login-icon {
		width: 200upx;
		height: 200upx;
		border-radius: 50%;
		background: #cecece;
		position: relative;
		margin: 40upx auto 0 auto;
	}

	.lcms-mlayer-login-icon-eyes {
		position: absolute;
		width: 100upx;
		left: 50%;
		top: 70upx;
		margin-left: -50upx;
	}

	.lcms-mlayer-login-icon-mouth {
		position: absolute;
		left: 50%;
		top: 70%;
		transform: translate(-50%, -50%);
		border-top: 12upx solid #ffffff;
		border-right: 12upx solid transparent;
		border-left: 12upx solid transparent;
		border-bottom: 16upx solid transparent;
		width: 50upx;
		height: 20upx;
		border-top-right-radius: 1999px;
		border-top-left-radius: 1999px;
	}

	.lcms-mlayer-login-icon-eyes::before,
	.lcms-mlayer-login-icon-eyes::after {
		content: "";
		background: #ffffff;
		width: 20upx;
		height: 20upx;
		border-radius: 50%;
		animation: blinkeyes 3s ease-in-out infinite 1s;
	}

	.lcms-mlayer-login-icon-eyes::before {
		float: left;
	}

	.lcms-mlayer-login-icon-eyes::after {
		float: right;
		left: 200upx;
		top: 100upx;
	}

	@keyframes blinkeyes {
		0% {
			transform: scaleY(1);
		}

		97% {
			transform: scaleY(1);
		}

		100% {
			transform: scaleY(0);
		}
	}
</style>
